<template>
 <div>
   <el-menu
     :default-active="activeIndex"
     class="el-menu-demo"
     mode="horizontal"
     background-color="#545c64"
     text-color="#fff"
     active-text-color="#ffd04b">
     <el-menu-item index="1" @click="toHomePage">主页</el-menu-item>
     <el-menu-item index="2" @click="toOrder">我的订单</el-menu-item>
     <el-menu-item index="3" @click="toAppointment">预约信息</el-menu-item>
     <el-menu-item index="4" @click="toPersonal">个人中心</el-menu-item>
     <el-menu-item v-if="status==='0'" index="5" @click="toManager">管理员功能</el-menu-item>
     <div style="margin-left: 95%;margin-top: 10px">
         <el-dropdown trigger="click">
           <el-avatar
             src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
             style="cursor: pointer"
           ></el-avatar>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item @click.native="LogOut" icon="el-icon-remove">退出登录</el-dropdown-item>
             <el-dropdown-item @click.native="toPersonal" icon="el-icon-user-solid">个人中心</el-dropdown-item>
             <el-dropdown-item icon="el-icon-question">关于我们</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>

     </div>
   </el-menu>
 </div>
</template>

<script>
import Global from "@/Global";
export default {
  data() {
    return {
      activeIndex:'',
      isManage:1,
      status:this.GLOBAL.status,
    };
  },
  methods:{
    toHomePage(){
      this.$router.push("/HomePage");
      this.activeIndex='1'
    },
    toOrder(){
      this.$router.push("/MyOrder");
      this.activeIndex='2'
    },
    toAppointment(){
      this.$router.push("/Appointment");
      this.activeIndex='3'
    },
    toPersonal(){

      this.$router.push("/PersonalInfo");
      this.activeIndex='4'
    },
    toManager(){
      this.$router.push('/Manage');
      this.activeIndex='5'
    },
    LogOut(){
      this.$router.push("/")
    }
  },
}
</script>
<style scoped>

</style>
